<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { usePageScroll } from "@/hooks/scroll";
import { useList } from "@/hooks/page";
import {
  index_api,
  get_area_api,
  list_api,
} from "@/package/guider/api/guider_associate";
import { Router } from "@/utils/router";

import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import NavSpace from "@/components/nav/space.vue";
import IndexMenuTitle from "@/pages/index/components/index-menu-title.vue";
import FormPicker from "@/components/form/picker.vue";
// import ListEmpty from "@/components/list/empty.vue";
import ListMore from "@/components/list/more.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad((options) => {
  useQuery(options as MiniApp.AppLaunchOption, () => {
    index_api().then((resp) => {
      adList.value = resp.banner;
      infoData.title = resp.introduce.title;
      infoData.introduce = resp.introduce.introduce;
      newsList.value = resp.associate_news;
    });
    get_area_api().then((resp) => {
      areaList.value = resp.items;
      areaList.value.unshift({ id: 0, name: "全部" });
    });
    reloadList();

    shareOption.title = "导游协会";
  });
});
const { pageIsScroll, onPageScroll } = usePageScroll(() => {
  listLoadMore.value = listData.value.length > 1;
});
onReachBottom(() => loadMoreList());

const adList = ref<any[]>([]);
const infoData = reactive({ title: "", introduce: "", isExpand: false });

const newsList = ref<any[]>([]);
const newsClick = (id: string) => {
  Router.navigateTo(`/package/guider/pages/association/news?id=${id}`);
};

const areaIndex = ref(0);
const areaList = ref<any[]>([]);

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 20 }, (query) => {
    return list_api({
      ...query,
      is_settle: -1,
      area_id: areaList.value[areaIndex.value]?.id || "",
    });
  });

const associationClick = (index: number) => {
  const association = listData.value[index];
  association.is_settle === 1
    ? Router.navigateTo(
        `/package/guider/pages/association/detail?id=${association.id}`
      )
    : popupModal.value?.show({
        content: "该协会/组织尚未入驻，敬请期待",
        showCancel: false,
      });
};

const popupModal = ref<InstanceType<typeof PopupModal>>();

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/package/guider/pages/association/index"
);
</script>

<template>
  <NavBack />
  <NavBar />
  <NavSpace />

  <view class="index-ad">
    <swiper class="index-ad-swipe" circular autoplay>
      <swiper-item v-for="i of adList" :key="i.id">
        <image class="index-ad-img" :src="i.img_url" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <view class="index-ad-mask"></view>
  </view>

  <view class="index-info">
    <view style="display: flex">
      <view style="position: relative">
        <view class="index-info-round"></view>
        <view class="index-info-title">{{ infoData.title }}</view>
      </view>
    </view>
    <view class="index-info-wrapper">
      <view
        class="index-info-content"
        :style="{ display: infoData.isExpand ? '' : '-webkit-box' }"
        @click="infoData.isExpand = !infoData.isExpand"
      >
        {{ infoData.introduce }}
      </view>
      <view
        class="index-info-expand"
        v-if="infoData.introduce.length > 72 && !infoData.isExpand"
        @click="infoData.isExpand = true"
      >
        展开
      </view>
    </view>
  </view>

  <view class="index-news">
    <view class="index-news-title">
      <IndexMenuTitle title="协会发布" />
    </view>
    <view class="index-news-wrapper">
      <scroll-view
        class="index-news-data"
        scroll-y
        enhanced
        :show-scrollbar="false"
      >
        <view class="index-news-space"></view>
        <view
          class="index-news-item"
          v-for="(i, d) of newsList"
          :key="i.id"
          @click="newsClick(i.id)"
        >
          <view class="index-news-line" v-if="d !== newsList.length - 1"></view>
          <view class="index-news-dot"></view>
          <view class="index-news-name">{{ i.title }}</view>
          <view style="display: flex; align-items: center">
            <image class="index-news-avatar" :src="i.icon" mode="aspectFill" />
            <view class="index-news-nickname">{{ i.associate_name }}</view>
            <view class="index-news-date">{{ i.cdate }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>

  <view class="index-data">
    <view class="index-data-title">
      <IndexMenuTitle title="各地导游协会/组织" />
    </view>
    <view class="index-data-area">
      <FormPicker
        v-model="areaIndex"
        :range="areaList"
        rangeKey="name"
        @change="reloadList"
      >
        <view class="index-data-area2">
          {{ areaIndex === 0 ? "地区" : areaList[areaIndex].name }}
          <image
            class="index-data-area3"
            src="@/package/guider/static/association-arrow.png"
          />
        </view>
      </FormPicker>
    </view>
    <view class="index-data-wrapper">
      <view
        class="index-data-item"
        v-for="(i, d) of listData"
        :key="i.id"
        @click="associationClick(d)"
      >
        <image class="index-data-img" :src="i.icon" mode="aspectFill" />
        <view class="index-data-content">
          <view class="index-data-name">{{ i.name }}</view>
          <view class="index-data-tag" v-if="i.is_settle === 1">已入驻</view>
        </view>
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>

  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
page {
  padding-top: 170rpx;
}

.index-ad {
  position: absolute;
  left: 0;
  top: 0;
  width: 750rpx;

  .index-ad-swipe {
    height: 430rpx;
  }

  .index-ad-img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .index-ad-mask {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 130rpx;
    background: linear-gradient(180deg, rgba(239, 239, 239, 0), #f9f9f9);
  }
}

.index-info {
  position: relative;
  padding: 30rpx;
  margin: 0 30rpx 50rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .index-info-round {
    position: absolute;
    right: -10rpx;
    bottom: -6rpx;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background: linear-gradient(148deg, rgba(255, 132, 31, 0) 0%, #ff841f);
  }

  .index-info-title {
    position: relative;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    font-weight: bold;
  }

  .index-info-wrapper {
    position: relative;
    padding-top: 18rpx;
  }

  .index-info-content {
    font-size: 26rpx;
    color: #666666;
    line-height: 44rpx;
    // display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .index-info-expand {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 2.2em;
    font-size: 26rpx;
    color: #ff7900;
    line-height: 44rpx;
    text-align: right;
    background-color: #ffffff;
  }
}

.index-news {
  margin: 0 30rpx 50rpx;

  .index-news-title {
    margin-bottom: 40rpx;
  }

  .index-news-wrapper {
    border-radius: 20rpx;
    background-color: #ffffff;
  }

  .index-news-data {
    height: 426rpx;
  }

  .index-news-space {
    height: 30rpx;
  }

  .index-news-item {
    position: relative;
    padding: 0 50rpx 30rpx 54rpx;
  }

  .index-news-name {
    margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
  }

  .index-news-avatar {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
  }

  .index-news-nickname {
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
  }

  .index-news-date {
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
  }

  .index-news-line {
    position: absolute;
    left: 28rpx;
    top: 20rpx;
    height: 100%;
    border-left: 2rpx solid #ffcc9e;
  }

  .index-news-dot {
    position: absolute;
    left: 24rpx;
    top: 16rpx;
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background-color: #ffcc9e;
  }
}

.index-data {
  .index-data-title {
    padding-left: 30rpx;
    margin-bottom: 40rpx;
  }

  .index-data-area {
    display: flex;
    padding-left: 30rpx;
    margin-bottom: 20rpx;
  }

  .index-data-area2 {
    display: flex;
    align-items: center;
    height: 48rpx;
    padding: 0 34rpx;
    font-size: 30rpx;
    color: #333333;
  }

  .index-data-area3 {
    width: 24rpx;
    height: 24rpx;
    margin-left: 10rpx;
  }

  .index-data-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
  }

  .index-data-item {
    display: flex;
    align-items: center;
    width: 296rpx;
    height: 148rpx;
    padding: 0 20rpx;
    margin-right: 18rpx;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
  }

  .index-data-img {
    flex-shrink: 0;
    width: 108rpx;
    height: 108rpx;
    border-radius: 50%;
  }

  .index-data-content {
    flex-grow: 1;
    min-width: 0;
    margin-left: 10rpx;
  }

  .index-data-name {
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .index-data-tag {
    width: 88rpx;
    margin-top: 6rpx;
    font-size: 24rpx;
    color: #f36514;
    line-height: 32rpx;
    text-align: center;
    border-radius: 4rpx;
    background-color: #ffede0;
  }
}
</style>